<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* .container {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        border: 1px solid #000;
        margin: 0 auto;
        position: relative;
      }
      .child {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      } */
      /* .container {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        border: 1px solid #000;
        display: table-cell;
        vertical-align: middle;
      }
      .child {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: auto;
      } */
      /* .container {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        border: 1px solid #000;
        position: relative;
      }
      .child {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } */
      /* float、clear和vertical-align 失效*/
      .box {
        display: flex;
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
      }
      /* grow 父 shrink 父 basis 本身 */
      span {
        height: 200px;
        /* flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto; */
        background: lightcoral;
      }
      span:nth-child(1) {
        /* flex-grow: 0; */
        /* flex-basis: 300px; */
      }
      span:nth-child(2) {
      }
      span:nth-child(3) {
      }
      span:nth-child(4) {
      }
    </style>
  </head>
  <body>
    <!-- <div class="container">
      <div class="child">剧中元素</div>
    </div> -->

    <div class="box">
      <span>item</span>
      <span>item</span>
      <span>item</span>
      <span>item</span>
    </div>
    <script>
      // var obj = {
      //   a: 1,
      //   async b() {
      //     return 'b'
      //   },
      //   async func() {
      //     const data = await this.b()
      //     console.log(data, 'data')
      //   },
      // }
      // const { b, func } = obj

      // func()
      // // obj.func()
      const arr = [1, 2, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5]

      const obj = arr.reduce((obj, item) => {
        if (obj[item]) {
          obj[item]++
        } else {
          obj[item] = 1
        }
        return obj
      }, {})

      console.log('obj:', obj)
    </script>
  </body>
</html>
